<template>
	<div class="tabbar">
		<div class="tabbar-con">
			<div class="tabbar-item" v-for="(item,index) in tabbarArr" :key="index" @click="onClickMenuItem(index)">
				<div class="tabbar-icon">
					<div class="tabbar-icon-ani" v-if="currentIndex===index">
						<div class="c"></div>
						<div class="d"></div>
						<div class="e">
							<img :src="item.img">
						</div>
					</div>
					<img src="../../../../assets/new/new_tab_icon_2.png" :class="{'no-light':currentIndex==index}" class="tabbar-icon-ani-img">
					<img :src="currentIndex===index?item.selectIcon:item.icon">
					<!-- <img :src="currentIndex===index?selectRotateImg:rotateImg"
               class="tabbar-rotateImg"> -->
				</div>
				<p>{{item.title}}</p>
			</div>
		</div>
	</div>
</template>

<script>
	import bus from '@/utils/bus'
	export default {
		components: {},
		model: {
			prop: 'currentIndex',
			event: 'change'
		},
		props: {
			currentIndex: Number
		},
		data() {
			return {
				tabbarArr: [{
						title: '综合监管',
						icon: require('../../../../assets/new/tab_1.png'),
						selectIcon: require('../../../../assets/new/new_tab_bgc.png'),
						img: require('../../../../assets/new/tab_icon_1.png')
					},
					{
						title: '道路保洁',
						icon: require('../../../../assets/new/tab_2.png'),
						selectIcon: require('../../../../assets/new/new_tab_bgc.png'),
						img: require('../../../../assets/new/tab_icon_2.png')
					},
					{
						title: '机械作业',
						icon: require('../../../../assets/new/tab_3.png'),
						selectIcon: require('../../../../assets/new/new_tab_bgc.png'),
						img: require('../../../../assets/new/tab_icon_3.png')
					},
					{
						title: '垃圾清运',
						icon: require('../../../../assets/new/tab_4.png'),
						selectIcon: require('../../../../assets/new/new_tab_bgc.png'),
						img: require('../../../../assets/new/tab_icon_4.png')
					},
					{
						title: '设施监控',
						icon: require('../../../../assets/new/tab_5.png'),
						selectIcon: require('../../../../assets/new/new_tab_bgc.png'),
						img: require('../../../../assets/new/tab_icon_5.png')
					},
					{
						title: '园林古树',
						icon: require('../../../../assets/new/tab_6.png'),
						selectIcon: require('../../../../assets/new/new_tab_bgc.png'),
						img: require('../../../../assets/new/tab_icon_6.png')
					},
					{
						title: '应急管理',
						icon: require('../../../../assets/new/tab_7.png'),
						selectIcon: require('../../../../assets/new/new_tab_bgc.png'),
						img: require('../../../../assets/new/tab_icon_7.png')
					},
				],
				rotateImg: require('../../../../assets/main/ani_normal.png'),
				selectRotateImg: require('../../../../assets/main/ani_active.png')
			};
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {

			},
			onClickMenuItem(index) {
				this.$emit('change', index)
				bus.$emit('searchType', false)
			}
		},
	}
</script>

<style lang='scss' scoped>
	.tabbar {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		z-index: 500;
		background: url(../../../../assets/main/bottom2.png) no-repeat 0 0;
		background-size: cover;

		.tabbar-con {
			display: flex;
			justify-content: center;
			padding-bottom: 8px;
			text-align: center;
			color: #eee;

			.tabbar-item {
				width: 100px;
				display: flex;
				flex-direction: column;
				align-items: center;
				cursor: pointer;
				position: relative;

				.tabbar-icon {
					position: relative;

					.tabbar-icon-ani {
						width: 60px;
						height: 60px;
						font-size: 30px;
						color: #FFF;
						border-radius: 50%;
						background-color: skyblue;
						position: absolute;
						top: 0;
						left: 50%;
						margin-left: -30px;
						animation: myfirst 1s linear infinite alternate;
						position: absolute;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0px 0px 17px 1px rgba(51, 102, 255, 0.5);
						overflow: hidden;
					}

					.tabbar-icon-ani-img {
						width: 64px;
						height: 64px;
						position: absolute;
						left: 12px;
						top: 1px;
						animation: myimg 2s linear infinite;
					}

					img {
						width: 88px;
						height: 80px;
					}

					.tabbar-rotateImg {
						position: absolute;
						top: 0;
						left: 1px;
						animation: entry-rotate 3s linear infinite;
					}
				}

				p {
					text-shadow: 1px 1px 2px #2d2f33, -1px -1px 2px #666;
				}
			}
		}
	}

	@keyframes myfirst {
		from {
			top: -5px;
			/* background: #00CCFF; */
		}

		to {
			top: 5px;
			/* background: #0096FF; */
		}
	}

	@keyframes myimg {
		from {
			transform: rotate(0deg);
			/* background: #00CCFF; */
		}

		to {
			transform: rotate(360deg);
			/* background: #0096FF; */
		}
	}

	.c {
		width: 60px;
		height: 60px;
		background-color: #0d9dff;
		background-image: conic-gradient(from 0turn at 50% 50%, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #7dffff, #fff, #7dffff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #7dffff, #fff, #7dffff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff, #0d9dff);
		box-sizing: border-box;
		animation: myfirsts 2s linear infinite;
		position: absolute;
		left: 0;
		top: 0;
		box-sizing: border-box;
	}

	.d {
		width: 56px;
		height: 56px;
		border-radius: 28px;
		position: absolute;
		left: 2px;
		top: 2px;
		z-index: 9;
		background-color: #fff;
		box-sizing: border-box;
	}

	.e {
		width: 56px;
		height: 56px;
		border-radius: 28px;
		position: absolute;
		left: 2px;
		top: 2px;
		z-index: 9;
		/* background-color: rgba(113,164,235,.4); */
		background-color: #568492;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			width: 36px !important;
			height: 36px !important;
		}
	}

	@keyframes myfirsts {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
	.no-light{
		opacity: 0;
	}
</style>
